<template>
  <div>
            <Avatar :src='src' :width='150' fit='fill'></Avatar>

            <table>
              {{$t('m.ojbk.bll')}}:


              &nbsp;&nbsp;&nbsp;{{$t('m.ojbk.ble')}}

                <tr>
                    <td style="padding:5px">
                        视频上传：
                    </td>
                    <td style="padding:5px">

                        <input type='file' @change='upload_qiniu_src'> <br>
                        <video id="video" :src='qiniu_src'  controls autoplay width="300" v-show='show'></video>
                    </td>

                </tr>
                <tr>
                  <td style="padding:5px">
                    {{$t('m.lock.blou')}}

                  </td>
                </tr>
                              <br><br>

            <Button @click="changepic" color="red">{{ mybutton }}</Button>


                <tr>
                    <td style="padding:5px">

                    </td>
                    <td style="padding:5px">

                    </td>

                </tr>

            </table>

     <!--国际化语言开关-->
      <h-switch v-model="lang" @change="lang_change">中/英</h-switch>

    <br>
    <br>
    <div>

        关注商品列表:

        <Checkbox :datas="goods" v-model="good_value"  ></Checkbox>

        <br /><br />

        <Button @click="flow" color="green">添加/取关操作</Button>

    </div>
    <br>
    <br>



  </div>

</template>



<script>

export default {
  data () {
    return {

      msg: "这是一个变量",
      src:'',

      show:false,

      //视频播放地址
      qiniu_src:'',

      //上传凭证
      uptoken:'',

      //切换按钮变量
      mybutton:'进入画中画',

      //语言变量
      lang:false,

      //商品关注列表
      good_value:[],
      goods:[],
      myid:{}


    }
  },


  mounted:function(){



      	//发送请求
	      this.axios.get('http://localhost:8000/myinfo/',{params:{uid:localStorage.getItem("uid")}}).then((result) =>{

					console.log(result);
			//视频地址
  			this.qiniu_src = 'http://q79yc57ps.bkt.clouddn.com/'+result.data.img;

		});

    //获取uptoken
    this.get_uptoken();

      //获取关注商品列表
    this.get_goods();



       //自动判断语言
    console.log(navigator.language);
    if (navigator.language == 'zh-CN'){

      this.$i18n.locale = 'cn';

    }else {
      this.$i18n.locale = 'en';
    }



},
  methods:{
    //批量操作
        flow:function(){


        console.log(this.good_value);

        var goods = [];

        for(let i=0,l=this.good_value.length;i<l;i++){

            goods.push(this.myid[this.good_value[i]]);

        }

        var glist = JSON.stringify(goods);

        console.log(glist);


        this.axios.get('http://localhost:8000/gflow/',{params:{uid:localStorage.getItem("uid"),ids:glist,type:2}}).then((result) =>{

              console.log(result);

              this.$Message(result.data.message);

      });

    },
        //获取关注商品
    get_goods:function(){

      this.axios.get('http://localhost:8000/uflow/',{params:{'uid':localStorage.getItem("uid")}}).then((result) =>{

              console.log(result);

              var goods = [];

              for(let i=0,l=result.data.length;i<l;i++){

                    goods.push(result.data[i].name);
                    this.myid[result.data[i].name] = result.data[i].id;

              }

              //赋值
              this.goods = goods;
              this.good_value = goods;

              console.log(goods);

      });

    },



      //定义画中画切换
      changepic:function(){

          //判断是否处于画中画界面
          if(video != document.pictureInPictureElement){

              //尝试进入画中画模式
              video.requestPictureInPicture();

              this.mybutton = '退出画中画'

          }else{
              //推出画中画
              document.exitPictureInPicture();

              this.mybutton = '进入画中画'
          }

      },


    //获取七牛云凭证
  	get_uptoken(){

  		this.axios.get('http://localhost:8000/qiniupro/').then((result) =>{

  						console.log(result);
  						this.uptoken = result.data.token;

  		});

  	},
    //视频上传七牛云
       upload_qiniu_src(e){

        console.log(this.uptoken);

        //获取文件对象
        let file = e.target.files[0];

        //声明参数
        let param = new FormData();

        //将上传凭证添加参数
        param.append('token',this.uptoken);

        //附加文件
        param.append('file',file);

        //定制化axios
        const axios_qiniu = this.axios.create({withCredentials:false});




        //发送请求
        axios_qiniu({

          method:'POST',
          url:'http://up-z1.qiniu.com/',
          data:param,
          timeout:30000,


        }).then(result=>{
          console.log(result);

          //赋值
          this.qiniu_src = 'http://q79yc57ps.bkt.clouddn.com//' + result.data.key;


          //修改视频地址
          // 发送请求
          this.axios.get('http://localhost:8000/updateuser/',{params:{uid:localStorage.getItem("uid"),img:result.data.key}}).then((result) =>{

  						console.log(result);
  						alert('添加成功')
				});


          this.show = true;



        });
    },
    //语言切换事件
    lang_change:function() {
      console.log(this.lang);

      //判断语言
      if (this.lang == true){

        //英文
        this.$i18n.locale = 'en';
        localStorage.setItem('lang','en');
      }else{

        //单选
        this.$i18n.locale = 'cn';
        localStorage.setItem('lang','cn')


      }


    },




    }
}


</script>

<style>



</style>
